<template>
    <div class="content">
        <h1 class="title">{{title}}</h1>
        <div v-html="content" class="content-detail"></div>
    </div>
</template>

<script>
    import {GetContentById} from '@/api/common'
    export default {
        data () {
            return {
                title : null,
                content : null
            }
        },
        mounted () {
            this.getContent()
        },
        methods :{
            getContent () {
                GetContentById({
                    id : this.$route.params.id,
                }).then(res => {
                    this.content = res.result.content;
                    this.title = res.result.title;
                })
            }
        }
    }
</script>

<style lang='less' >
    .content {
        width: 1200px;
        margin: 15px auto;
        font-size: 14px;
        background: #fff;
        padding: 15px;
        .title {
            text-align: center;
            font-size: 24px;
            color: #565555;
            font-weight: bold;
            margin-bottom: 50px;
            
        }
        .content-detail {
            font-size: 16px;
            img {
                display: block;
                margin-bottom: 15px;
            }
            p {
                text-indent: 2em;
            }
        }
    }
</style>